<template name="GameCenter">
	{{#table onScroll=onTableScroll onResize=onTableResize onSort=onTableSort}}
	<tbody class="rc-game__list">
		<thead>
			<tr>
				<th class="js-sort rc-table-td--medium" data-sort="name">
					<div class="table-fake-th">{{_ "Name"}}</div>
				</th>
				<th class="rc-table-td">
					<div class="table-fake-th">{{_ "Description"}} </div>
				</th>
			</tr>
		</thead>
		{{#each games}}
		<tr class="rc-game-center__game" data-name="{{name}}">
			<td>
				<div class="rc-table-wrapper">
					{{#if icon}}
					<div class="rc-table-avatar" style="background-image:url({{icon}})"></div>
					{{/if}}
					<div class="rc-table-info">
						<span class="rc-table-title">
							{{name}}
						</span>
					</div>
				</div>
			</td>
			<td>
				<div class="rc-table-wrapper">
					<div class="rc-table-info">
						<span class="rc-table-title">
							{{#if summary}}
							{{summary}}
							{{else}}
							{{description}}
							{{/if}}
						</span>
						{{#if summary}}
						<span class="rc-table-subtitle">
							{{description}}
						</span>
						{{/if}}
					</div>
				</div>
			</td>
			<td>
				<div class="rc-table-wrapper">
					<div class="rc-table-info">
							<button class="game-center__invite-players js-invite" title="Invite Friends">
									{{> icon block="game-center__invite-players-icon" icon="plus"}}
							</button>
					</div>
				</div>
			</td>
		</tr>
		{{/each}}
		{{#if isLoading}}
		<tr>
			<td colspan="3" style="position: relative;">{{> loading}}</td>
		</tr>
		{{/if}}
	</tbody>
	{{/table}}
	<div class="rc-user-info-container flex-nav animated{{#unless showGame}} animated-hidden{{/unless}}">
		{{#if showGame}}
			{{> GameContainer (gameContainerOptions) }}
		{{/if}}
	</div>
</template>
